<!--  -->
<template>
  <el-dialog
    :center="true"
    :title="'请选择屏幕, 当前分组 => ' + group_info.name"
    :visible="dialogformvisible_edit_group_screen"
    :before-close="handleClose_edit"
    :modal-append-to-body="false"
  >
  <!-- screenInfoListAll -->
    <el-table
      ref="multipleTable"
      :data="screenInfoListAll_ForSizeFilter"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @cell-click="cell_click"
    >
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="点位名称"></el-table-column>
      <el-table-column prop="width" label="宽度"></el-table-column>
      <el-table-column prop="height" label="高度"></el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button
        @click="$emit('update:dialogformvisible_edit_group_screen', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="saveGroup">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import LoginVue from '@/views/Login.vue';
import { mapMutations, mapState } from "vuex";
// import axios from "axios";
export default {
  name: "Group_edit_select_screen_dialog",
  data() {
    return {
      selectedScreens: [],
            
      //2021-7-29 应该按照组的尺寸过滤屏幕信息
      screenInfoListAll_ForSizeFilter:[],

    };
  },
  props: ["dialogformvisible_edit_group_screen", "group_info", "screensInGroup"],
  watch: {
    dialogformvisible_edit_group_screen(v, oldval) {
      if (v) {
        this.initSelectScreenInGroup();
      }
    },
  },
  computed: {
    ...mapState(["screenInfoListAll"]),
  },

  methods: {
    ...mapMutations(["setScreenListAll"]),

    handleSelectionChange(val) {
      this.selectedScreens = val;
      console.log(this.selectedScreens);
      // console.log(this.group_info);
    },

    cell_click(row, col, cell, event) {
      // console.log("cell-click");
      // if(col.type == 'selection'){
         this.$refs.multipleTable.toggleRowSelection(row);
      // };
    },

    //每次对话框显示的时候,
    initSelectScreenInGroup() {
      // this.$nextTick(() => {
      setTimeout(() => {    
        //add 2021-7-29
        this.screenInfoListAll_ForSizeFilter = this.screenInfoListAll.filter(
          (v,i)=>v.width == this.group_info.width && v.height == this.group_info.height 
        );

        ///////只有这个可以, 只要过滤就不行?/????????为什么啊
        // this.screenInfoListAll_ForSizeFilter = this.screenInfoListAll;

        this.$refs.multipleTable.clearSelection();

        //必须加 nextTick... 刚更新完data ,dom 没来得及更新, 
        this.$nextTick(()=>{
          this.screenInfoListAll_ForSizeFilter.forEach(
            row =>{ 
              for(let j of this.screensInGroup){
                if(row.screen_id == j.screen_id) 
                {
                    this.$refs.multipleTable.toggleRowSelection(row, true)
                    break
                }
              }
            } 
          );
        });
       
      }, 1000);
      // });
    },
    async saveGroup() {
      //axios.put
      //group_id,  selected screen_ids , send to server
      if (this.selectedScreens.length == 0) {
        console.log("分组内容为空");
        let ret = await this.$confirm("分组内容为空, 是否保存空设置?", "确认", {
          type: "warning",
        });
      }
      ////$confirm  点 取消 触发 catch, 点确认 正常执行;
      let sel_screen_ids = this.selectedScreens.map((v, i) => {
        return v.screen_id;
      });
      console.log(sel_screen_ids);
      let ret = await this.$http.put(`screens`, {
        group_id: this.group_info.group_id,
        screen_ids: sel_screen_ids,
      });
      console.log(ret);
      let { action, result } = ret.data.data;
      console.log(action, result);
      if (result == "ok") this.$message.success("修改分组信息成功");
      else this.$message.error("修改分组信息失败");

      console.log("--------------------------->>>>");
      this.$emit("update:dialogformvisible_edit_group_screen", false);
    },

    handleClose_edit(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          //done(); //done 干啥的
          this.$emit("update:dialogformvisible_edit_group_screen", false);
        })
        .catch((_) => {});
    },
    async getAllScreenList() {
      let ret = await this.$http.get(`screens`);
      let { leds } = ret.data.data;
      console.log(leds);
      this.setScreenListAll(leds);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getAllScreenList();
    //在父级dom 里加载一次,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>